import React,{useState,useEffect,useLayoutEffect} from 'react'
import { StyleSheet,
         View,Text,Image,
         TouchableOpacity,ScrollView,
         ImageBackground,TextInput} from 'react-native'
import '../../global'  
import { useFocusEffect } from '@react-navigation/native'
const Mypublish = ({route,navigation}) => {
    const [num,setNum]=useState(0)
    const [user,setUser]=useState(user_info)
    const [mytopic,setMytopic]=useState([{

    }])
    useLayoutEffect(()=>{
        navigation.setOptions({

         headerStyle: {
             backgroundColor: 'dodgerblue',
         },
         headerTintColor: 'black',
         headerTitleAlign: 'center',
        })
        },[])
      useFocusEffect(React.useCallback(()=>{
            fetch('http://82.157.94.91:8000/topics/get_all_topics')
             .then(res=>res.json())
             .then(res=>{
                const topic = res.result.filter((item) => item.topic_user_id==user.id);
                console.log(topic)
                setMytopic(topic)
                setNum(topic.length)   
             })
            },[]))
      const del=(id)=>{
        fetch('http://82.157.94.91:8000/topics/delete_my_topic',{
          method:'post',
          headers: {
             'Content-Type': 'application/json',
          },
          body:JSON.stringify({
           id:id
          })
        })
        .then(res=>res.json())
        .then(res=>{
         console.log(res)
        })
        fetch('http://82.157.94.91:8000/topics/get_all_topics')
        .then(res=>res.json())
        .then(res=>{
           const topic = res.result.filter((item) => item.topic_user_id==user.id);
           console.log(topic)
           setMytopic(topic)
           setNum(topic.length)   
        })
      }
   
  return(
      <View>
           <Text style={styles.num}>{num}个内容</Text>
           {num==0?
            <View>
                 <Image 
                            style={styles.none}
                            source={require('../../images/col.png')}
                         />
                 <Text style={styles.point}>
                     还没有发布任何问题哦
                 </Text>
            </View>:
           
           <ScrollView style={styles.collectcontent}>
           {mytopic.map(item=>{
                
                return<View>
                  <View style={{ 
                    display:'flex',
                   flexDirection:'row',
                  justifyContent:"space-around",}}>
                <TouchableOpacity onPress={()=>{navigation.navigate('Deatil',{txt:'详情',detailObj:item})}}>
                      <View style={styles.user}>
                         <Text style={styles.title}>{item.topic_title}</Text>
                         <View style={styles.userstyle}>
                         <Image 
                            style={styles.head}
                            source={{
                                uri: item.topic_user_avatar,
                              }}
                         />
                         
                          <Text>{item.user_name}</Text>
                         </View>
                           <Text style={styles.synopsis}>{item.topic_content}</Text>
                           <View>
                           <Text style={styles.detail}>{item.topic_number_of_likes}赞同</Text>
                           </View>
                                    

                 </View>
                 </TouchableOpacity>
                 <TouchableOpacity onPress={()=>{del(item.id)}}>
                              <Text style={styles.deltopic}>删除帖子</Text>
                 </TouchableOpacity>
                 </View>
                                    
                <Text style={{width:pxtodpW(750),height:pxtodpH(5),backgroundColor:'#ccc'}}></Text>

                </View>
            
            })}
           </ScrollView>}
      </View>
  )
}

const styles = StyleSheet.create({
  none:{
    width:pxtodpW(500),
    height:pxtodpH(500),
    marginLeft:pxtodpW(100),
    marginTop:pxtodpH(200)
  },
  point:{
  textAlign:'center',
  fontSize:15,
  color:'grey'
  },
  num:{
    width:pxtodpW(750),
    height:pxtodpH(40),
    color:'grey',
    marginLeft:pxtodpW(10)
  },
  collectcontent:{
   
    width:pxtodpW(750),
    height:pxtodpH(1000),
  },
  user:{
    width:pxtodpW(550),
    height:pxtodpH(230),
    marginTop:pxtodpH(10),
    marginLeft:pxtodpW(30),
 
},
title:{
    fontSize:20
},
head:{
   width:pxtodpW(80),
   height:pxtodpH(75),
   marginRight:pxtodpW(10),
   borderRadius:15
},
deltopic:{
  width:pxtodpW(100),
  height:pxtodpH(50),
  backgroundColor:'dodgerblue',
  textAlign:"center",
  lineHeight:pxtodpH(50),
  borderRadius:10,
  marginTop:pxtodpH(180)
},
detail:{
  color:'#bbb',
  marginLeft:pxtodpW(5),
},
synopsis:{
  marginTop:pxtodpH(-10),
  marginLeft:pxtodpW(5),
  fontSize:14
}
   });
   
export default Mypublish
